<template>
  <div class="app-container my-container">
    <NavBar title="我的" :left="false" />
    <div class="has-nav-bar">
      <van-cell-group>
        <van-cell is-link to="index" class="user-info-wrap">
          <template #title>
            {{ userInfo.realName }}
          </template>
          <template #label>
            {{ userInfo.username }} / {{ userInfo.mobile }}
          </template>
          <template #icon>
            <img class="user-avatar" :src="constants.getFileView(userInfo.avatar)" data-default="avatar" @error="handleImageError">
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell title="我的组织" is-link to="index">
          <template #icon>
            <svg-icon icon-class="icon-org" />
          </template>
        </van-cell>
        <van-cell title="我的岗位" is-link to="index">
          <template #icon>
            <svg-icon icon-class="icon-job" />
          </template>
        </van-cell>
        <van-cell title="我的下属" is-link to="index">
          <template #icon>
            <svg-icon icon-class="icon-next" />
          </template>
        </van-cell>
        <van-cell title="设置" is-link to="index">
          <template #icon>
            <svg-icon icon-class="icon-setting" />
          </template>
        </van-cell>
      </van-cell-group>
      <div class="logout-wrap" @click="logout">退出登录</div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    logout() {
      this.$dialog.confirm({
        title: '系统提示',
        message: '您确定要退出系统?'
      }).then(() => {
        this.$store.dispatch('logout').then(() => {
          location.reload()
        })
      }).catch((_) => {
      })
    }
  }
}
</script>
<style lang="scss" scoped >
  @import "~@/styles/variables.scss";

.my-container {
  .user-info-wrap{
    height: 84px;
    margin-bottom: 1rem;
    .van-cell__title{
      margin-left: 1rem;
      font-size: 1.125rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .van-icon{
      margin-top: 20px;
    }
  }
  .logout-wrap{
    height: 44px;
    line-height: 44px;
    text-align: center;
    background-color: #fff;
    font-size: .875rem;
    margin-top: 1rem;
    color: $colorDanger;
    cursor: pointer;
  }
}
</style>

